Reactive Twig Templates

An Interactive UI
in PHP & Twig

Develop your interface.. from the comfort of Symfony.
No Javascript needed. 

composer require symfony/ux-live-component

What Live Components gives you

  • Re-render on change

    Update the DOM from PHP, without writing JavaScript.

  • Live actions

    Call a PHP method straight from a click.

  • Bound models

    Keep form fields and properties in sync.

  • Server-side validation

    Reuse Symfony constraints as the user types.

  • Batched updates

    Debounced requests and loading states included.

Interactive UI in PHP & Twig

Add Live Components to your app.

Build dynamic interfaces with zero JavaScript

src/Twig/Components/Package/SearchPackages.php 
// ... use statements hidden - click to show
 
use App\Service\UxPackageRepository;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;
 

#[AsLiveComponent('SearchPackages', template: 'components/Package/SearchPackages.html.twig')]
final class SearchPackages
{
    use DefaultActionTrait;

    #[LiveProp(writable: true, url: true)]
    public ?string $query = null;

    public function __construct(private UxPackageRepository $packageRepo)
    {
    }

    /**
     * @return list<\App\Model\UxPackage>
     */
    public function getPackages(): array
    {
        return $this->packageRepo->findAll($this->query);
    }
}
templates/components/Package/SearchPackages.html.twig 
<div{{ attributes }}>

    <twig:Form:Input type="text" data-model="query" placeholder="Results update as you type..." />

    <div class="pt-3 grid gap-2 grid-cols-[repeat(auto-fill,minmax(260px,1fr))]" data-loading="addClass(opacity-50)">
        {% for package in computed.packages %}
            <twig:PackageListItem package="{{ package }}" titleTag="h4" />
         {% else %}
            No packages found "{{ query }}"
        {% endfor %}
    </div>

</div>

Three attributes, one component

What makes a component live.

A Live Component is a Twig Component that re-renders itself. Three attributes decide what travels between the browser and PHP.

State that survives

LiveProp marks the properties sent back on every render. Add url: true and the state lands in the address bar.

#[LiveProp(writable: true, url: true)]
public ?string $query = null;

Methods the template can call

LiveAction exposes a method to your markup. LiveArg passes the arguments it needs, validated on the way in.

#[LiveAction]
public function addToCart(
    #[LiveArg] int $productId,
): void {
    $this->cart->add($productId);
}

Components that talk

LiveListener reacts to an event another component emitted, so a list can refresh itself when a form saves.

#[LiveListener('product:created')]
public function onProductCreated(): void
{
    $this->page = 1;
}

Install Live Components.

$ composer require symfony/ux-live-component

More from Symfony UX.

Live Components is one package among many. They share the same Stimulus foundation and install the same way.

Image for the Pagination UX package

Pagination

Paginate any data with numbered pages, lookahead, or cursors.

Image for the Autocomplete UX package

Autocomplete

Ajax-powered, auto-completable select elements

Image for the Translator UX package

Translator

Use Symfony's translations in JavaScript

Browse every package

Find out what else you can build.

Read documentation
Downloading Files

Downloading Files

Download from a route or send generated content while preserving state and events.

Infinite Scroll - 2/2

Infinite Scroll - 2/2

Loading on-scroll, flexible layout grid, colorfull loading animations and... more T-Shirts!

Keep Live Components at hand.

Documentation, the people behind it, and where to ask when something does not behave.

Documentation

Symfony UX Live Components Docs
Community

Feedback · support · contributions.
Support

Get help with Symfony UX Live Components